<template>
  <section class="wrap">
    <header class="header">
      <h2 class="title">员工信息管理</h2>
      <a href="javascript:;" class="addBtn" @click="a">添加</a>
    </header>
    <form class="add" v-show="bool">
      <input type="text" class="name" placeholder="姓名" v-model="msg" />
      <label class="genderWrap">
        <input type="checkbox" class="gender" v-model="s" />
        <div class="genderIco">
          <div class="genderInner"><span>男</span><span>女</span></div>
        </div>
      </label>
      <input
        type="number"
        class="age"
        placeholder="年龄"
        step="1"
        min="18"
        max="80"
        v-model="o"
      />
      <label class="stateWrap">
        <input type="checkbox" class="state" v-model="k" />
        <div class="stateIco">
          <div class="stateInner"><span>在职</span><span>离职</span></div>
        </div>
      </label>
      <button type="button" class="submit" @click="b">录入信息</button>
    </form>
    <nav class="nav">
      <a href="javascript:;">所有员工信息</a>
      <a href="javascript:;">女员工信息</a>
      <a href="javascript:;">男员工信息</a>
      <a href="javascript:;">在职员工信息</a>
      <a href="javascript:;">离职员工信息</a>
    </nav>
    <ul class="list">
      <li>
        <span
          ><input
            type="checkbox"
            v-model="checkedAll"
            @change="checkedAllcons()"
        /></span>
        <span>姓名</span>
        <span>性别</span>
        <span>年龄</span>
        <span>信息</span>
        <span>操作</span>
      </li>
      <li v-for="(i, index) in arr" :key="index" v-show="te">
        <span
          ><input type="checkbox" v-model="i.check" @change="checkeditem()"
        /></span>
        <span>{{ i.name }}</span>
        <span>{{ i.age }}</span>
        <span>{{ i.xb }}</span>
        <span>{{ i.zz }}</span>
        <span @click="z(index)">删除</span>
      </li>
    </ul>
    <p class="operate">
      <a href="javascript:;" @click="del">删除选中项</a>
      <a href="javascript:;" @click="seac">入职选中项</a>
      <a href="javascript:;">离职选中项</a>
    </p>
  </section>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        { name: "张三", age: "18", xb: "男", zz: "在职", check: false },
        { name: "李四", age: "50", xb: "女", zz: "离职", check: false },
      ],
      bool: false,
      msg: "",
      o: "",
      s: "",
      k: "",
      checkedAll: false,
      str: true,
      te: true,
    };
  },
  methods: {
    a() {
      this.bool = true;
    },
    b() {
      this.arr.push({
        name: this.msg,
        age: this.o,
        xb: this.s ? "女" : "男",
        zz: this.k ? "离职" : "在职",
        check: false,
      });
    },
    z(index) {
      this.arr.splice(index, 1);
    },
    checkedAllcons() {
      this.arr.forEach((item) => (item.check = this.checkedAll));
    },
    checkeditem() {
      this.checkedAll = this.arr.every((item) => item.check);
    },
    del() {
      this.arr = this.arr.filter((item) => {
        return item.check == false;
      });
    },
    seac() {
      //在职的话等于true 离职的话等于false
      this.arr.forEach((item) => {
        if (item.zz == "在职") {
          item.check = true;
        } else {
          item.check = false;
        }
      });
    },
  },
};
</script>

<style lang="css">
h2 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  position: relative;
  width: 600px;
  margin: 30px auto;
  font: 12px "宋体";
}

.addBtn {
  position: absolute;
  right: 0;
  top: 0;
}

input {
  margin: 0;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover {
  color: #23527c;
}

a.selected {
  color: #ccc;
}

.header {
  border-bottom: 2px solid #666;
}

.title {
  text-align: center;
  font: 14px/32px "宋体";
}

.nav {
  display: flex;
  font: 12px/26px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
}

.add {
  height: 40px;
  align-items: center;
  font: 12px/24px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
  display: flex;
}

.name,
.age,
.submit {
  width: 80px;
  text-align: center;
  height: 24px;
  padding: 0;
  border: 1px solid #ccc;
}

.genderWrap,
.stateWrap {
  width: 44px;
  padding: 1px;
  border: 1px solid #ccc;
}

.stateWrap {
  width: 88px;
}

.gender,
.state {
  display: none;
}

.genderIco,
.stateIco {
  width: 22px;
  height: 22px;
  background: #666;
  overflow: hidden;
  transition: 0.3s;
}

.stateIco {
  width: 44px;
}

.genderInner,
.stateInner {
  transition: 0.3s;
  display: flex;
  width: 44px;
  font: 12px/22px "宋体";
  color: #fff;
}

.stateInner {
  width: 88px;
}

.genderInner span,
.stateInner span {
  margin: auto;
}

.gender:checked ~ .genderIco {
  margin-left: 22px;
}

.gender:checked ~ .genderIco .genderInner {
  margin-left: -22px;
}

.state:checked ~ .stateIco {
  margin-left: 44px;
}

.state:checked ~ .stateIco .stateInner {
  margin-left: -44px;
}

.list {
  margin: 0 auto;
  width: 90%;
}

.list li {
  display: flex;
  font: 12px/24px "宋体";
  border-bottom: 1px solid #ccc;
}

.list span {
  display: block;
  margin: 0 auto;
  flex: 1;
  text-align: center;
}

.list li span:nth-of-type(1) {
  width: 40px;
  flex: none;
}

.operate {
  display: flex;
  justify-content: space-around;
  font: 12px/24px "宋体";
  border-top: 2px solid #000;
}
</style>
  